<template>
    <div>
        <div style="width: 100%;height: 700px;">
            <ImageEditor ref="tuiImageEditor"
                         :include-ui="useDefaultUI"
                         :options="options"
                         @objectMoved="objectMoved"

            >
            </ImageEditor>
        </div>
    </div>
</template>

<script>
    import 'tui-image-editor/dist/tui-image-editor.css';
    import { ImageEditor } from '@toast-ui/vue-image-editor';

    export default {
        name   : "tui-image-editor",
        components: {
            ImageEditor
        },
        data() {
            const whiteTheme = {
                'common.bi.image'       : 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
                'common.bisize.width'   : '251px',
                'common.bisize.height'  : '21px',
                'common.backgroundImage': 'none',
                'common.backgroundColor': 'transparent',
                'common.border'         : '0px',

                // header
                'header.backgroundImage': 'none',
                'header.backgroundColor': 'transparent',
                'header.border'         : '0px',

                // load button
                'loadButton.backgroundColor': '#fff',
                'loadButton.border'         : '1px solid #ddd',
                'loadButton.color'          : '#222',
                'loadButton.fontFamily'     : 'NotoSans, sans-serif',
                'loadButton.fontSize'       : '12px',

                // download button
                'downloadButton.backgroundColor': '#fdba3b',
                'downloadButton.border'         : '1px solid #fdba3b',
                'downloadButton.color'          : '#fff',
                'downloadButton.fontFamily'     : 'NotoSans, sans-serif',
                'downloadButton.fontSize'       : '12px',

                // icons default
                'menu.normalIcon.color'   : '#8a8a8a',
                'menu.activeIcon.color'   : '#555555',
                'menu.disabledIcon.color' : '#434343',
                'menu.hoverIcon.color'    : '#e9e9e9',
                'submenu.normalIcon.color': '#8a8a8a',
                'submenu.activeIcon.color': '#e9e9e9',

                'menu.iconSize.width'    : '24px',
                'menu.iconSize.height'   : '24px',
                'submenu.iconSize.width' : '32px',
                'submenu.iconSize.height': '32px',

                // submenu primary color
                'submenu.backgroundColor': '#1e1e1e',
                'submenu.partition.color': '#858585',

                // submenu labels
                'submenu.normalLabel.color'     : '#858585',
                'submenu.normalLabel.fontWeight': 'lighter',
                'submenu.activeLabel.color'     : '#fff',
                'submenu.activeLabel.fontWeight': 'lighter',

                // checkbox style
                'checkbox.border'         : '1px solid #ccc',
                'checkbox.backgroundColor': '#fff',

                // rango style
                'range.pointer.color': '#fff',
                'range.bar.color'    : '#666',
                'range.subbar.color' : '#d1d1d1',

                'range.disabledPointer.color': '#414141',
                'range.disabledBar.color'    : '#282828',
                'range.disabledSubbar.color' : '#414141',

                'range.value.color'          : '#fff',
                'range.value.fontWeight'     : 'lighter',
                'range.value.fontSize'       : '11px',
                'range.value.border'         : '1px solid #353535',
                'range.value.backgroundColor': '#151515',
                'range.title.color'          : '#fff',
                'range.title.fontWeight'     : 'lighter',

                // colorpicker style
                'colorpicker.button.border': '1px solid #1e1e1e',
                'colorpicker.title.color'  : '#fff'
            };
            return {
                useDefaultUI: true,
                options     : {
                    includeUI   : {
                        loadImage      : {
                            path: '',
                            name: 'SampleImage'
                        },
                        // locale: locale_ru_RU,
                        theme          : whiteTheme, // or whiteTheme
                        initMenu       : 'filter',
                        menuBarPosition: 'right'
                    },
                    cssMaxWidth : 500,
                    cssMaxHeight: 400
                },
                moveStart : false,
                mouseDownStatus : false,
                wrapTransform: {
                    x: 0,
                    y: 0,
                    z: 1,
                }
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.addMoveEvent();
            })
        },
        methods   : {
            objectMoved(props) {
                console.log('props :', props);
            },
            addMoveEvent() {
                let element = this.$refs.tuiImageEditor.getRootElement();
                let wrap = element.querySelector('.tui-image-editor');

                document.body.addEventListener('keydown', (e) => {
                    console.log('e.keyCode :', e.keyCode);
                    if (e.keyCode === 32 && !this.moveStart) {
                        this.moveStart = true;
                        let item = this.getWrapElement();
                        item.style.display = 'block';
                    }
                })

                document.body.addEventListener('keyup', (e) => {
                    console.log('e.keyCode :', e.keyCode);
                    if (e.keyCode === 32 && this.moveStart) {
                        e.preventDefault();
                        this.moveStart = false;
                        let item = this.getWrapElement();
                        item.style.display = 'none';
                    }
                });

                wrap.addEventListener('mousemove',(event) => {
                    if (this.mouseDownStatus && this.moveStart) {
                        this.wrapTransform.x += event.movementX;
                        this.wrapTransform.y += event.movementY;
                        this.setWrapTransform();
                    }
                });
                wrap.addEventListener('wheel',(event) => {
                    event.preventDefault();

                    let scale = this.wrapTransform.z;
                    scale += event.deltaY * -0.01;

                    // Restrict scale
                    scale = Math.min(Math.max(.125, scale), 4);
                    this.wrapTransform.z = scale;
                    this.setWrapTransform();
                })
                wrap.addEventListener('mousedown',(event) => {
                    if (!this.mouseDownStatus)
                        this.mouseDownStatus = true;
                })
                document.body.addEventListener('mouseup',(event) => {
                    if (this.mouseDownStatus)
                        this.mouseDownStatus = false;
                })


            },
            getWrapElement() {
                let element = this.$refs.tuiImageEditor.getRootElement();
                let wrap = element.querySelector('.tui-image-editor');
                let div     = element.querySelector('.tui-image-editor-wrap-class');

                if (!div) {
                    div = document.createElement('div');
                    div.setAttribute('style', 'position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;opacity:0;display:none;');
                    div.setAttribute('class', 'tui-image-editor-wrap-class');
                    wrap.appendChild(div);
                }
                return div;
            },
            setWrapTransform() {
                let element = this.$refs.tuiImageEditor.getRootElement();
                let wrap = element.querySelector('.tui-image-editor');

                wrap.style.transform = `translate(${this.wrapTransform.x}px,${this.wrapTransform.y}px) scale(${this.wrapTransform.z})`;
            }

        }
    }
</script>

<style scoped lang="less">

</style>
